<!doctype html>
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
<?php use_helper('I18N') ?>
<?php include('scripts.php'); ?>

<!-- CSS Styles -->
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/colors.css">

<!-- Google WebFonts -->
<link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>
<style type="text/css">
    .redbutton {
        background:#ae432e url('/images/btns/btn_red.png') repeat-x left top;
    }
</style>
<script>
$(function() {
    $("#lang").change(function() {
        $("#langForm").submit();
    });

    $.populateDOB({
        dobYear : $("#dob_year")
        ,dobMonth : $("#dob_month")
        ,dobDay : $("#dob_day")
        ,dobFull : $("#dob")
    });

    $("#captchaimage").bind('click', function() {
        $.post('/captcha/newSession');
        $("#captchaimage").load('/captcha/imageRequest');
        return false;
    });

    $("#sponsorId").change(function(){
        if ($.trim($('#sponsorId').val()) != "") {
            verifySponsorId();
        }
    });

    $("#registerForm").validate({
        messages : {
            confirmPassword: {
                equalTo: "<?php echo __('Please enter the same password as above') ?>"
            },
            captcha: "<br><?php echo __('Correct captcha is required') ?>.",
            nickName: {
                remote: "<?php echo __('Alias already in use') ?>."
            }
        },
        rules : {
            "captcha" : {
                required: true,
                remote: "/captcha/process"
            },
            "sponsorId" : {
                required: true
//                , minlength : 8
            },
            "userpassword" : {
                required : true,
                minlength : 2
            },
            "confirmPassword" : {
                required : true,
                minlength : 2,
                equalTo: "#userpassword"
            },
            "fullname" : {
                required : true,
                minlength : 2
            },
            /*"nickName" : {
                required : true,
                minlength : 2,
                remote: "/member/verifyNickName"
            },
            "ic" : {
                required : true,
                minlength : 3
            },
            "address" : {
                required : true,
                minlength : 3
            },
            "postcode" : {
                required : true,
                minlength : 3
            },*/
            "email" : {
                required : true
                , email: true
            }
            /*, "contactNumber" : {
                required : true
                , minlength : 10
            },
            "bankName" : {
                required : true
            },
            "bankAccountNo" : {
                required : true
            },
            "bankHolderName" : {
                required : true
            }*/
        },
        submitHandler: function(form) {
            $("#chkTerm").removeClass("error");

            if ($("#chkTerm").attr("checked") != "checked") {
                $("#chkTerm").addClass("error");
                alert("<?php echo __('Please accept our Terms & Conditions and Privacy Policy') ?>.");
                return false;
            }
            if ($.trim($('#sponsorId').val()) == "") {
                alert("<?php echo __('Sponsor ID cannot be blank') ?>.");
                $('#sponsorId').focus();
            } else {
                waiting();
                $.ajax({
                    type : 'POST',
                    url : "/member/verifySponsorId",
                    dataType : 'json',
                    cache: false,
                    data: {
                        sponsorId : $('#sponsorId').val()
                    },
                    success : function(data) {
                        waiting();
                        if (data == null || data == "") {
                            alert("<?php echo __('Invalid Sponsor ID') ?>");
                            $('#sponsorId').focus();
                            $("#sponsorName").val("");
                        } else {
                            form.submit();
                        }
                    },
                    error : function(XMLHttpRequest, textStatus, errorThrown) {
                        alert("Your login attempt was not successful. Please try again.");
                    }
                });
            }
        },
        success: function(label) {
            //label.addClass("valid").text("Valid captcha!")
        }
    });
});

function verifySponsorId() {
    waiting();
    $.ajax({
        type : 'POST',
        url : "/member/verifySponsorId",
        dataType : 'json',
        cache: false,
        data: {
            sponsorId : $('#sponsorId').val()
        },
        success : function(data) {
            if (data == null || data == "") {
                alert("<?php echo __('Invalid Sponsor ID') ?>");
                $('#sponsorId').focus();
                $("#sponsorName").val("");
            } else {
                $.unblockUI();
                $("#sponsorName").val(data.nickname);
            }
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert("Your login attempt was not successful. Please try again.");
        }
    });
}
function waiting() {
    $("#waitingLB h3").html("<h3>Loading...</h3><div id='loader' class='loader'><img id='img-loader' src='/images/loading.gif' alt='Loading'/></div>");

    $.blockUI({
        message: $("#waitingLB")
            , css: {
                border: 'none',
                padding: '5px',
                'background-color': '#fff',
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                'border-radius': '10px',
                opacity: .8,
                color: '#000'
    }});
    $(".blockOverlay").css("z-index", 1010);
    $(".blockPage").css("z-index", 1011);
}
function alert(data) {
    var msgs = "";
    if ($.isArray(data)) {
        jQuery.each(data, function(key, value) {
            msgs = value + "<br>";
        });
    } else {
        msgs = data + "<br>";
    }

    var alertPanel = "<div style='margin-bottom: 20px; padding: 0 .7em;' class='ui-state-highlight ui-corner-all'><p><span style='float: left; margin-right: .3em;' class='ui-icon ui-icon-info'></span>";
    alertPanel += msgs +"</p></div>";
    $("#waitingLB h3").html(alertPanel);
    $.blockUI({
        message: $("#waitingLB")
            , css: {
                border: 'none',
                padding: '5px',
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                'border-radius': '10px',
                opacity: .9
    }});
    $(".blockOverlay").css("z-index", 1010);
    $(".blockPage").css("z-index", 1011);
    $('.blockOverlay').attr('title','Click to unblock').click($.unblockUI);
}
</script>
</head>
<body>
<div id="waitingLB" style="display:none; cursor: default">
    <h3>We are processing your request.  Please be patient.</h3>
</div>
    <div style="margin-left: 200px; padding: 10px"><img src="/images/login/logo.png" alt="Maplegolds"></div>
	<section role="main" style="box-shadow: 0 0 5px #999999;">
		<!-- Login box -->
		<article class="full-block clearfix">

			<div class="article-container">

				<h3 style="font-size: 153.9%;"><?php echo __('Member Registration') ?></h3>

                <div style="position: fixed; right: 100px; top: 10px">
                    <form method="post" action="/home/language" id="langForm" name="langForm">
                    <select name="lang" id="lang">
                        <option value="en"
                                <?php
                                    if ($sf_user->getCulture() == "en")
                                        echo 'selected'
                                ?>
                        >English</option>
                        <option value="cn"
                                <?php
                                    if ($sf_user->getCulture() == "cn")
                                        echo 'selected'
                                ?>
                                >中文</option>
                    </select>
                    </form>
                </div>

				<form action="/member/doRegister" id="registerForm" method="post">
					<fieldset>
						<dl>
							<dt>
								<label><?php echo __('Sponsor ID') ?></label>
							</dt>
							<dd>
								<input name="sponsorId" type="text" id="sponsorId" class="login_t73" />
							</dd>
							<dt>
								<label><?php echo __('Sponsor Name') ?></label>
							</dt>
							<dd>
                                <input name="sponsorName" type="text" id="sponsorName" readonly="readonly" style="border: none"/>
							</dd>
							<dt>
								<label><?php echo __('Shareholder Password') ?></label>
							</dt>
							<dd>
								<input name="userpassword" type="password" id="userpassword" class="login_t73"/>
							</dd>
							<dt>
								<label><?php echo __('Confirm Shareholder Password') ?></label>
							</dt>
							<dd>
								<input name="confirmPassword" type="password" id="confirmPassword"
                                    class="login_t73"/>
							</dd>
							<dt>
								<label><?php echo __('Full Name') ?></label>
							</dt>
							<dd>
								<input name="fullname" type="text" id="fullname" class="login_t73"/>
							</dd>
							<!--<dt>
								<label><span id="LabelNickName"><?php /*echo __('Alias') */?></span></label>
							</dt>
							<dd>
								<input name="nickName" type="text" id="nickName" class="login_t73" />
							</dd>
							<dt>
								<label><?php /*echo __('Passport/ID Card No') */?></label>
							</dt>
							<dd>
								<input name="ic" type="text" id="ic" class="login_t73"/>
							</dd>
							<dt>
								<label><?php /*echo __('Country') */?></label>
							</dt>
							<dd>
                                <?php /*include_component('component', 'countrySelectOption', array('countrySelected' => "China (PRC)", 'countryName' => 'country', 'countryId' => 'country')) */?>
							</dd>
							<dt>
								<label><?php /*echo __('Address') */?></label>
							</dt>
							<dd>
								<input name="address" type="text" id="address" class="login_t73"/>
							</dd>
							<dt>
								<label><?php /*echo __('Postal Code') */?></label>
							</dt>
							<dd>
								<input name="postcode" type="text" id="postcode" class="login_t73"/>
							</dd>-->
							<dt>
								<label><?php echo __('Email') ?></label>
							</dt>
							<dd>
								<input name="email" type="text" id="email" class="login_t73"/>
							</dd>
							<!--<dt>
								<label><?php /*echo __('Contact No') */?></label>
							</dt>
							<dd>
								<input name="contactNumber" type="text" id="contactNumber" class="bp_05"/>
							</dd>
							<dt>
								<label><?php /*echo __('Gender') */?></label>
							</dt>
							<dd>
								<input id="rdoGender_0" type="radio" name="gender" value="M" checked="checked"/>&nbsp;
                                <label for="rdoGender_0"><?php /*echo __('Male') */?></label>&nbsp;
                                <input id="rdoGender_1" type="radio" name="gender" value="F"/>&nbsp;
                                <label for="rdoGender_1"><?php /*echo __('Female') */?></label>
							</dd>
						    <dt>
								<label><?php /*echo __('Date of Birth') */?></label>
							</dt>
							<dd>
								<select id="dob_year"></select>
                                <select id="dob_month"></select>
                                <select id="dob_day"></select>
                                <input name="dob" readonly="readonly" type="hidden" id="dob" class="bp_05"/>
							</dd>
                            <dt>
								<label><?php /*echo __('Bank Name') */?></label>
							</dt>
                            <dd>
								<input name="bankName" type="text" id="bankName" class="login_t73"/>
							</dd>
                            <dt>
								<label>&nbsp;</label>
							</dt>
                            <dd>
                                <label style="color: #AE432E">例如:中国农业银行福州中亭街支行,马来西亚银行吉隆坡市蕉赖区，英国渣打银行利物浦市</label>
							</dd>
							<dt>
								<label><?php /*echo __('Bank Holder Name') */?></label>
							</dt>
							<dd>
								<input name="bankHolderName" type="text" id="bankHolderName" class="login_t73"/>
							</dd>
                            <dt>
								<label><?php /*echo __('Bank Account No') */?></label>
							</dt>
							<dd>
								<input name="bankAccountNo" type="text" id="bankAccountNo" class="login_t73"/>
							</dd>-->
                            <dt>
								<label><?php echo __('Security Code') ?></label>
							</dt>
							<dd>
								<table cellpadding="0" cellspacing="0" style="width: 300px">
                                    <tr>
                                        <td>
                                        <div id="captchaimage" style="height: 32; width: 100">
                                            <a href="<?php echo $_SERVER['PHP_SELF']; ?>" id="refreshimg" title="Click to refresh image"><img src="/captcha/image?<?php echo time(); ?>" width="90" height="30" alt="Captcha image" style="border-style: none"/></a>
                                        </div>
                                        <td>&nbsp;</td>
                                        <td><input name="captcha" type="text" id="captcha" class="login_t73" size="10"/></td>
                                        </td>
                                    </tr>
                                </table>
							</dd>
						</dl>
					</fieldset>
                    <table cellpadding="0" cellspacing="5" width="80%" align="center" border="0">
                        <tr height="80">
                            <td colspan="4" align="center" height="30">
                                <input id="chkTerm" type="checkbox" name="chkTerm"/><span
                                    id="Label2"><?php echo __('I have read and agreed to the') ?> </span><a id="HyperLink3" href="#" style="color: #e29521"><?php echo __('Terms & Conditions') ?></a>
                                <span id="Label8"><?php echo __('and') ?> </span><a id="HyperLink4" href="#" style="color: #e29521"><?php echo __('Privacy Policy') ?></a>.
                            </td>

                        </tr>
                    </table>
                    <br>
					<button type="submit" class="right redbutton" id="btnRegister"><?php echo __('Register') ?></button>
				</form>

			</div>

		</article>

	</section>
</body>
</html>